<template>
  <section>
    <div style="display: flex;justify-content: space-between;">
      <div class="content-title">{{ title }}</div>
    </div>
    <div class="sort-type">
        <div v-for="(x, y) in types" :key="y" @click="selectWebType(y)" :class="softType == y ? 'active' : ''">
          {{ x }}
        </div>
      </div>
    <div class="soft-list">
      <div v-for="(a, b) in list" :key="b" @click="goPath(a)">
        <div :class="'iconfont icon-' + a.icon" :style="{ backgroundColor: a.bg }"></div>
        <div class="word">{{ a.title }}</div>
      </div>
    </div>
  </section>
</template>
<script setup>
import system from '@/utils/system';
import { queryData } from '@/apis/mysql'
import { ref, onMounted } from 'vue';
import options from '@/utils/options';
const list = ref([])
const alls = ref([])
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const types = options.softs
const softType = ref(0)
// 获取软件
const getSorts = () => {
  queryData({
    table: 'softs',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    alls.value = res.data
    selectWebType(0)
  })
}

function selectWebType(y){
  softType.value = y
  list.value = alls.value.filter(x => x.type == y + 1)
}

function goPath(x) {
  system.openFile(x.start)
}

onMounted(() => {
  getSorts()
})
</script>
<style scoped lang="scss">
.sort-type {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 25%;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
    }

    .active {
      // background-color: #1889fa;
      // color: #fff;
      color: #1889fa;
    }
  }
.soft-list {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #fff;
  padding-top: 10px;
  >div {
    width: 25%;
    height: 80px;
    text-align: center;
    cursor: pointer;

    >div:nth-child(1) {
      font-size: 24px;
    }
  }
}
</style>
